<template>
  <div class="app-container" :class="dynamicContainer">
    <div v-if="appStore.mobileClient && appStore.sidebarOpen" class="mobile-mask" @click="handleClickOutSide" />
    <div class="sidebar-container">
      <slot name="sidebar"></slot>
    </div>

    <div class="main-container">
      <div class="navbar-container">
        <slot name="navbar"></slot>
      </div>

      <template v-if="$slots.tagsView">
        <div class="tagsView-container">
          <slot name="tagsView"></slot>
        </div>
      </template>

      <div class="content-container">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup name="LayoutClassical">
import { useAppStore } from '@/store/app'

const appStore = useAppStore()
const dynamicContainer = computed(() => {
  return {
    'sidebar-hidden': !appStore.sidebarOpen,
    'sidebar-open': appStore.sidebarOpen,
    'without-animation': appStore.withoutAnimation,
    mobile: appStore.mobileClient
  }
})
function handleClickOutSide() {
  appStore.sidebarToggle(false)
}
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  width: 100%;
  height: 100vh;

  &.mobile.sidebar-open {
    position: fixed;
    top: 0;
  }

  .sidebar-container {
    position: fixed;
    width: $sidebarWidth;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    background-color: $sidebarBg;
    overflow: hidden;
    box-shadow: $sidebarShadow;
    -webkit-box-shadow: $sidebarShadow;
    transition: width $sidebarTransition;
    -webkit-transition: width $sidebarTransition;
  }

  .main-container {
    position: relative;
    margin-left: $sidebarWidth;
    transition: margin-left $sidebarTransition;
    height: 100%;

    .navbar-container {
      height: $navbarHeight;
      position: relative;
    }

    .tagsView-container {
      height: $tagsView;
    }

    .content-container {
      height: calc(100% - $navbarHeight - $tagsView);
      padding: 10px 5px 5px 10px;
      background-color: #EEF0F5;
    }
  }
}

.sidebar-hidden {
  .sidebar-container {
    width: $sidebarHiddenWidth;
  }

  .main-container {
    margin-left: $sidebarHiddenWidth;
  }
}

.mobile-mask {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  // 显示在sidebar后，点击目录时单机事件冒泡触发handleClickOutSide
  z-index: 999;
}

.mobile {
  .sidebar-container {
    transition: transform 0.28s;
    width: $sidebarWidth !important;
  }

  // .main-container {
  //   margin-left: 0px;
  // }

  &.sidebar-hidden {
    .sidebar-container {
      pointer-events: none;
      transition-duration: 0.28s;
      transform: translate3d(-$sidebarWidth, 0, 0);
    }

    .main-container {
      margin-left: 0px;
    }
  }
}

.without-animation {

  .main-container,
  .sidebar-container {
    transition: none;
  }
}
</style>
